<template>
	<div class="bg-white">
		<div class="flex-row header-t">
			<span class="fs-18 border-btm">我的素材</span>
			<div class="flex-row">
				<el-input v-model="keyword" placeholder="请输入内容"></el-input>
				<el-button icon="el-icon-search" circle @click='search'></el-button>
			</div>

		</div>
		<div class="padd-20">
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column prop="userId" label="编号" width="180">
				</el-table-column>
				<el-table-column prop="title" label="标题" width="180">
				</el-table-column>
				<el-table-column prop="mark" label="类型">
				</el-table-column>
				<el-table-column prop="fileName" label="文件名称" width="180">
				</el-table-column>
				<el-table-column prop="typeStr" label="资源类型" width="180">
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="danger" @click="handleDelete(scope.row.$,scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currPage"
			:page-sizes="[30, 50]" layout="prev, pager, next, jumper,total, sizes" :total="totalCount">
			</el-pagination>
		</div>

	</div>

</template>

<script>
	export default {
		created() {
			this.showTableData();
		},
		data() {
			return {
				keyword: '',
				currPage: 1,
				totalPage: 0,
				pageSize: 10,
				totalCount: 0,
				input: '',
				tableData: [],

			}
		},
		methods: {
			handleSizeChange(val) {
				this.ruleForm.size = val;
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.ruleForm.page = val;
			},
			showTableData() {
				this.$api.sourceMaterial.findAllSourceMaterial({
					page: this.currPage,
					size: this.pageSize
				}).then(res => {
					this.tableData = res.data.sourceMaterialVos;
					this.totalPage = res.data.totalPage;
					this.totalCount = res.data.totalCount;
					//console.log(res.data);
				});
			},
			search() { //由于原网页也没有实现这一功能 ，暂且 同上
				this.$api.sourceMaterial.findAllSourceMaterial({
					page: this.currPage,
					size: this.pageSize
				}).then(res => {
					this.tableData = res.data.sourceMaterialVos;
					this.totalPage = res.data.totalPage;
					this.totalCount = res.data.totalCount;
					//console.log(res.data);
				});

			},
			handleDelete(index, id) {
				this.$confirm('此操作将永久删除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$api.sourceMaterial.deleteSourceMaterial({
						id: id
					}).then(res => {
						this.showTableData();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			}
		}
	}
</script>

<style>
	.fs-18 {
		font-size: 18px;
	}

	.bg-white {
		background-color: #FFFFFF;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.header-t {
		padding: 20px 20px;
		height: 80px;
		line-height: 20px;
		justify-content: space-between;
	}

	.padd-20 {
		padding: 0px 20px;
	}

	.border-btm {
		border-bottom: 3px solid dodgerblue;
	}
</style>
